<template>
  <div class="RankBox2Nd">
    <div class="Avatar_box" id="Avatar_box_2nd">
      <img class="icon_second" src="../assets/icon_second.png" alt="">
      <div style="height:0.1rem;"></div>
      <canvas id="canvas_2nd"></canvas>
      <div style="height:0.04rem;"></div>
      <div class="name">
        <span>{{player.cnName}}</span><span v-if="player.cnName && player.enName">-</span><span>{{player.enName}}</span>
        <span>{{(player.cnName === '' && player.enName === '') ? player.loginName.replace(/(\d{3})(\d{4})(\d{4})/, "$1****$3") : ''}}</span>
      </div>
      <div class="correctNum">
        <span>答对题数</span>
        <p>{{type === 'daily' ? player.dailyCorrectAnswer : type === 'all' ? player.allCorrectAnswer : player.correctAnswer}}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'RankBox2Nd',
  props: {
    player: {
      type: Object
    },
    type: {
      type: String
    }
  },
  data () {
    return {
      msg: 'value'
    }
  },
  mounted () {
    let width1STBox = document.getElementById('Avatar_box_2nd')
    let canvas1ST = document.getElementById('canvas_2nd')
    let ctx = canvas1ST.getContext('2d')
    let style = window.getComputedStyle(width1STBox, null)
    let width1st = Math.round(parseInt(style.width) * 1.6)
    let height1st = Math.round(parseInt(style.height) * 2.8)
    this.drawAvatarImg(canvas1ST, ctx, width1st * 0.9, height1st * 0.9, require('../assets/rank_2nd.png'), 'https://hnres.etalk365.com/' + this.player.pictures, require('../assets/Crown_2nd.png'))
  },
  methods: {
    drawAvatarImg (canvas, ctx, width, height, AvatarBgUrl, AvatarImgUrl, AvatarTop) {
      canvas.setAttribute('width', width + 'px')
      canvas.setAttribute('height', height + 'px')
      let AvatarImg = new Image()
      let AvatarBg = new Image()
      let Crown1ST = new Image()
      let defaultImg = new Image()
      AvatarImg.src = AvatarImgUrl
      AvatarBg.src = AvatarBgUrl
      Crown1ST.src = AvatarTop
      defaultImg.src = require('../assets/defaultA.jpg')
      let defalutPromise = new Promise((resolve, reject) => {
        defaultImg.onload = () => {
          resolve(1)
        }
        defaultImg.onerror = () => {
          resolve(0)
        }
      })
      let imgPromise = new Promise((resolve, reject) => {
        AvatarImg.onload = () => {
          resolve(1)
        }
        AvatarImg.onerror = () => {
          resolve(0)
        }
      })
      let BgPromise = new Promise((resolve, reject) => {
        AvatarBg.onload = () => {
          resolve(1)
        }
        AvatarBg.onerror = () => {
          resolve(0)
        }
      })
      let CrownPromise = new Promise((resolve, reject) => {
        Crown1ST.onload = () => {
          resolve(1)
        }
        Crown1ST.onerror = () => {
          resolve(0)
        }
      })
      Promise.all([BgPromise, imgPromise, CrownPromise, defalutPromise]).then((data) => {
        ctx.beginPath()
        ctx.drawImage(AvatarBg, 0, height * 0.25, width, height * 0.6)
        ctx.save()
        ctx.arc(width / 2, height * 0.58, height * 0.32, 0, 2 * Math.PI)
        ctx.clip()
        // ctx.clip() 之后 所有操作都会在这范围里面
        if (Number(data[1]) === 1) {
          ctx.drawImage(AvatarImg, (width - height * 0.8) * 0.5, height * 0.2, height * 0.8, height * 0.8)
        } else {
          ctx.drawImage(defaultImg, (width - height * 0.8) * 0.5, height * 0.2, height * 0.8, height * 0.8)
        }
        ctx.restore()
        ctx.drawImage(Crown1ST, width / 2 - width * 0.35 / 2, height * 0.04, width * 0.35, width * 0.25)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
// .Avatar_box{
//   width:100%;
//   height:40%;
// }
.RankBox2Nd{
  position: relative;
  .icon_second{
    position: absolute;
    top:0;
    right:0;
    width:0.4rem;
  }
}
#canvas_2nd{
  zoom:0.5;
  display: block;
  font-size: 0;
  margin: 0 auto;
}
.name,.correctNum{
  color: white;
  font-size: 0.25rem;
  line-height: 0.3rem;
}
.name{
  display: block;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
  text-indent: 0.2em;
}
.correctNum{
  span{
    display: block;
    font-size: 0.2rem;
  }
  p{
    display: block;
    font-weight: 600;
    font-family: '微软雅黑';
    font-size: 0.3rem;
    line-height: 0.35rem;
  }
}
</style>
